<template>
  <div class="signUp">
    <ListTab
      v-model="tabStatus"
      :show-header="!showMobilePage"
      :tabs="tabs"
      :max-badge="{ num: 100, str: '99+' }"
      is-table
      @tabClick="handleTabClick" />
    <div :class="{'mobile-table mobile-min-height':showMobilePage}" class="min-fill-page signUp-list">
      <div v-if="!showMobilePage" style="position:relative;margin-bottom:16px;" class="filter">
        <FilterInput
          ref="FilterToolRef"
          v-model="paramsObj"
          :filter-list="filterList"
          :jump-set-params="jumpSetParams"
          is-show-config
          show-search-btn
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus" />
        <div v-if="!showMixedChecked" class="current-user-action-box">
          <el-checkbox
            v-if="[-1, 2].includes(tabStatus)"
            v-model="paramsObj.unscore"
            :true-label="1"
            :false-label="0"
            style="margin-right: 20px;"
            @change="queryClick">我未评分</el-checkbox>
          <el-checkbox v-model="isMyPending" style="margin-right: 20px;" @change="queryClick">待我处理</el-checkbox>
          <el-checkbox v-model="isShowMe" @change="queryClick" >我发起的</el-checkbox>
          <el-checkbox v-model="isMyApproval" @change="queryClick" >我审批的</el-checkbox>
        </div>
        <el-dropdown v-else :hide-on-click="false" trigger="click">
          <el-button class="el-dropdown-link search-btn-style more-btn">快捷筛选<i class="el-icon-caret-bottom"/></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="[-1, 2].includes(tabStatus)">
              <el-checkbox v-model="paramsObj.unscore" :true-label="1" :false-label="0" style="margin-right: 20px;" @change="queryClick">我未评分</el-checkbox>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-checkbox v-model="isMyPending" @change="queryClick">待我处理</el-checkbox>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-checkbox v-model="isShowMe" @change="queryClick" >我发起的</el-checkbox>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-checkbox v-model="isMyApproval" @change="queryClick" >我审批的</el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <createBtn v-if="hasRouteAuth('crm:filter:add')" style="margin-right: 10px;" @click.native="toCreate"/>
        <MoreOpeator
          ref="moreOpeatorRef"
          :list="[
            { label: '批量邀请评分', handelClick: handleBatchInvite, auth: hasRouteAuth('crm:filter:batchInvite') },
            { label: '导入', importApi:'/admin/up/import', callback: fetchData, type: 'import', auth: hasRouteAuth('crm:filter:import') },
            { label: '导出', exportApi: `admin/up/export`, type: 'export', auth: hasRouteAuth('crm:filter:export'),
              exportName: '达人初筛信息', isBeforeExport: true, beforeExport: exportUpInfo, refName: 'upExportRef' },
            { label: '导入模板下载', exportApi: '/admin/up/template', type: 'export', auth: hasRouteAuth('crm:filter:import'),
              exportName: '达人初筛模板', isBeforeExport: false }
          ]"
        />
      </div>
      <div class="table-list">
        <div v-loading="listLoading" style="min-height: 300px;">
          <u-table
            v-if="list.items.length"
            ref="tableRef"
            :data="list.items"
            :height="setTableHeight"
            :row-height="49"
            :border="true"
            beautify-table
            header-drag-style
            use-virtual
            class="fb-table"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
            hightlight-current-row
            @select="selectTable"
            @select-all="selectTable"
            @sort-change="sortMethod">
            <u-table-column
              :fixed="selectFixed"
              align="center"
              type="selection"
              width="50"/>
            <u-table-column align="left" label="平台" min-width="110" label-class-name="diy-cell" class-name="diy-cell">
              <template slot-scope="scope" slot="header">
                <div class="diyHeader">{{ scope.column.label }}</div>
              </template>
              <template slot-scope="scope">
                <processSn :is-expedited="scope.row.isExpedited">
                  <div class="flex">
                    <PlatformIcon :data="scope.row.platformName" />
                    <ToolTip :content="scope.row.platformName"/>
                  </div>
                </processSn>
              </template>
            </u-table-column>
            <u-table-column align="left" label="账号名称" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.accountName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="账号ID" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.accountId" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="主页链接" min-width="110">
              <template slot-scope="scope">
                <ToolTip
                  :content="scope.row.link"
                  :is-can-click="scope.row.link && (scope.row.link.indexOf('http://') === 0 || scope.row.link.indexOf('https://') === 0)"
                  @handelClick="toLink(scope.row.link)"/>
              </template>
            </u-table-column>
            <u-table-column align="left" label="标签" min-width="200">
              <template slot-scope="scope">
                <TagSelect v-model="scope.row.tag" mode="list" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="综合得分" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.score" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="初筛状态" min-width="110">
              <template slot-scope="scope">
                <StatusText :color="['#406eff','#FD8546', '#FD8546', '#31CC9C', '#FFBC3D'][scope.row.status]" :text="scope.row.status | formatFilterStatus" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="初筛结果" min-width="110">
              <template slot-scope="scope">
                <StatusText :color="['#406eff','#FD8546', '#31CC9C', '#FF4E5F', '#31CC9C', '#FF4E5F'][scope.row.result]" :text="scope.row.result| formatResult" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="初筛有效期" min-width="120" prop="validity" sortable="custom">
              <template slot-scope="scope">
                <template v-if="scope.row.validity || scope.row.validity === 0">
                  <div v-if="scope.row.validity > 0" :style="{color: scope.row.validity > 3 ? '#31CC9C' : '#FD8546'}">{{ scope.row.validity }}天</div>
                  <div v-else style="color: #FF4E5F">已过期</div>
                </template>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column v-if="[3, 4].includes(tabStatus)" min-width="130" align="left" label="签约状态">
              <template slot-scope="scope">
                <div class="status-wrap">
                  <div v-if="getStatusMap(scope.row.signDetailStatus)" class="flex-center">
                    <div :style="{background: getStatusMap(scope.row.signDetailStatus).bg}" class="status-text">{{ getStatusMap(scope.row.signDetailStatus).status }}</div>
                    <span v-if="getStatusMap(scope.row.signDetailStatus).remark" class="f12 g3 ml5">{{ getStatusMap(scope.row.signDetailStatus).remark }}</span>
                  </div>
                  <span v-else>--</span>
                </div>

                <!-- <StatusText :color="['#999', '#FF4E5F','#31CC9C'][scope.row.signStatus+1]" :text="scope.row.signStatus | signStatusType" /> -->
              </template>
            </u-table-column>
            <u-table-column align="left" label="评分人" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.scorerNames" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="粉丝量" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="numFormat(scope.row.fans,true,1,'万')" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="收藏数" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="numFormat(scope.row.collect,true,1,'万')" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="评论数" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="numFormat(scope.row.comment,true,1,'万')" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="点赞数" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="numFormat(scope.row.like,true,1,'万')" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="性别" min-width="110">
              <template slot-scope="scope">
                <ToolTip v-if="typeof scope.row.gender === 'number'" :content=" scope.row.gender ? '女' : '男'" />
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="达人所在城市" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.area" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="分成说明" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.shareRemark" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="公司分成比例" min-width="110">
              <template slot-scope="scope">
                <div>{{ scope.row.shareRatio ? `${scope.row.shareRatio}%` : '--' }}</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="达人分成比例" min-width="110">
              <template slot-scope="scope">
                <div>{{ scope.row.shareRatio ? `${(100 - Number(scope.row.shareRatio)).toFixed(2)}%` : '--' }}</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="返点比例" min-width="110">
              <template slot-scope="scope">
                <div>{{ scope.row.returnRatio ? `${scope.row.returnRatio}%` : '--' }}</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="合作方式" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.cooperation | cooperationStatusFilter" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="签单签约经纪" min-width="110">
              <template slot-scope="scope">
                <CheckUserInfo :user-id="scope.row.agentId" :label="scope.row.agentName" style="margin-right: 4px;" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="签约所属部门" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.department" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="推荐理由" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.reason" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="目前进度" min-width="150">
              <template slot-scope="scope">
                <StatusText
                  :color="['#31CC9C','#406EFF', '#FD8546', '#FB5227','#FF4E5F'][scope.row.schedule]"
                  :text="scope.row.schedule | formatScheduleFilter"
                />
              </template>
            </u-table-column>
            <u-table-column align="left" label="进度备注" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.remark" />
              </template>
            </u-table-column>
            <u-table-column min-width="120" align="left" label="当前节点">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.currentNode" />
              </template>
            </u-table-column>
            <u-table-column min-width="130" align="left" label="当前处理人">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.currentHandler" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="审批状态">
              <template slot-scope="scope">
                <StatusText
                  v-if="scope.row.approvalStatus"
                  :color="['', '#fd8546', '#FF4E5F', '#999', '#31cc9c', '#406EFF'][scope.row.approvalStatus]"
                  :text="scope.row.approvalStatus | formatApprovalStatus" />
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建人">
              <template slot-scope="scope">
                <CheckUserInfo :user-id="scope.row.creatorId" :label="scope.row.creator" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建人部门" min-width="100">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.createDepartment" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建时间" min-width="160" prop="createTime" sortable="custom">
              <template slot-scope="scope">
                <ToolTip :content="format(scope.row.createTime,'YYYY/MM/DD HH:mm:ss')" />
              </template>
            </u-table-column>
            <u-table-column :width="showMobilePage?60:120" fixed="right" align="left" label="操作">
              <template slot-scope="scope">
                <div class="operate">
                  <div v-if="scope.row.status !== 0 && !showMobilePage" class="button-text br bold" @click="toDetail(scope.row)">查看</div>
                  <MoreOpeator
                    :list="hasApproval(scope.row) ?
                      [
                        { label: '查看', handelClick: () => {toDetail(scope.row)}, auth: scope.row.status !== 0 && showMobilePage },
                        { label: '发起签约', handelClick: () => {handleSignUp(scope.row)}, disabled: !(showSignUp(scope.row) && scope.row.approvalStatus === 4) },
                      ] : [
                        { label: '查看', handelClick: () => {toDetail(scope.row)}, auth: scope.row.status !== 0 && showMobilePage },
                        { label: '评分', handelClick: () => {handleScore(scope.row)}, disabled: !showScore(scope.row) },
                        { label: '邀请评分', handelClick: () => {inviteScore(scope.row)}, disabled: !showInvite(scope.row) },
                        { label: '发起签约', handelClick: () => {handleSignUp(scope.row)}, disabled: !showSignUp(scope.row) },
                        { label: '重新评分', handelClick: () => {handleRescore(scope.row)}, type: 'iconTip', tip: '初筛有效期已过期或初筛结果不合格的账号支持重新评分', auth: hasRouteAuth('crm:filter:add'), disabled: !scope.row.canBeReScore },
                        { label: '编辑', handelClick: () => {toEdit(scope.row)}, disabled: !setEditDisable(scope.row) },
                        { label: '删除', handelClick: () => {handleDelete(scope.row)}, disabled: setDelDisable(scope.row) }
                      ]
                    "
                  >
                    <div v-if="!showMobilePage" slot="button" class="button-text bold">更多<i class="el-icon-arrow-down"/></div>
                    <el-image v-else slot="button" :src="operateBtns" class="table-dropdown-img"/>
                  </MoreOpeator>
                </div>
              </template>
            </u-table-column>
          </u-table>
          <!-- <EmptyPlaceholder v-else-if="!list.isInit" slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" /> -->
          <EmptyPlaceholder v-else slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" />
        </div>
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
          <el-pagination
            v-show="list.total > 0"
            :current-page.sync="page"
            :page-size="perPage"
            :total="list.total"
            :small="true"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="pageLayout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <fixed-pagination v-if="list.total > 0 && !showMobilePage || showMobilePage">
          <template v-if="showMobilePage">
            <FilterInput
              ref="FilterToolRef"
              v-model="paramsObj"
              :filter-list="filterList"
              show-search-btn
              show-mobile-icon
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
              @filterTagStatus="filterTagStatus">
              <div slot="checkGroup">
                <el-checkbox
                  v-if="[-1, 2].includes(tabStatus)"
                  v-model="paramsObj.unscore"
                  :true-label="1"
                  :false-label="0"
                  style="margin-right: 20px;"
                  @change="queryClick">我未评分</el-checkbox>
                <el-checkbox v-model="isShowMe" style="margin-right: 20px;" @change="queryClick" >我发起的</el-checkbox>
                <el-checkbox v-model="isMyApproval" @change="queryClick" >我审批的</el-checkbox>
                <el-checkbox v-model="isMyPending" @change="queryClick" >待我处理</el-checkbox>
              </div>
            </FilterInput>
            <MoreOpeator
              ref="moreOpeatorRef"
              :list="[
                { label: '批量邀请评分', handelClick: handleBatchInvite, auth: hasRouteAuth('crm:filter:batchInvite') },
                { label: '导入', importApi:'/admin/up/import', callback: fetchData, type: 'import', auth: hasRouteAuth('crm:filter:import') },
                { label: '导出', exportApi: `admin/up/export`, type: 'export', auth: hasRouteAuth('crm:filter:export'),
                  exportName: '达人初筛信息', isBeforeExport: true, beforeExport: exportUpInfo, refName: 'upExportRef' },
                { label: '导入模板下载', exportApi: '/admin/up/template', type: 'export', auth: hasRouteAuth('crm:filter:import'),
                  exportName: '达人初筛模板', isBeforeExport: false }
              ]"
              show-mobile-icon
            />
            <createBtn
              v-if="hasRouteAuth('signUp:signUp:creat')"
              mobile-table
              @click.native="toCreate"/>
          </template>
          <template v-else>
            <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
            <div style="flex: 1;" />
            <el-pagination
              v-show="list.total > 0"
              :current-page.sync="page"
              :page-size="perPage"
              :total="list.total"
              :page-sizes="[20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
    </div>
    <inviteDialog ref="inviteDialogRef" @update="updateInvite"/>
    <scoreDialog ref="scoreDialogRef" @update="fetchData"/>
  </div>
</template>
<script>
import ListTab from '@/components/ListTab';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import createBtn from '@/components/Common/baseComponent/createBtn';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import PlatformIcon from '@/components/Common/platformIcon';
import processSn from '@/components/AuditProcess/processSn';
import TagSelect from '@/components/Common/tagSelect';
import inviteDialog from './components/inviteDialog';
import scoreDialog from './components/scoreDialog';
import { formatResult, formatFilterStatus, getStatusMap, formatApprovalStatus, expeditedOptions, filterApprovalOptions } from '@/filters/status';
import { format } from '@/filters/date';
import { numFormat } from '@/filters/number';
import { tabList, getFilterList, deleteUp } from '@/api/filter';
import { platformList } from '@/api/select';
import { getTagAll } from '@/api/config';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import ElMessage, { showModal } from '@/utils/message';
import { CURRENT_NODE_MODULE } from '@/utils/const';
import { hasRouteAuth } from '@/utils/permission';
import tableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import { resultOption } from './data';
import { cooperationOption, cooperationStatusFilter, formatScheduleFilter } from '@/utils/accountCommonData';
import { signStatusType } from '@/views/signUp/components/status';
import axios from 'axios';
import { TAG_MODULES } from '@/utils/const';
import { mapState } from 'vuex';

export default {
  filters: {
    formatResult,
    formatScheduleFilter,
    cooperationStatusFilter,
    signStatusType,
    formatFilterStatus,
    formatApprovalStatus
  },
  components: {
    ListTab,
    EmptyPlaceholder,
    createBtn,
    MoreOpeator,
    inviteDialog,
    scoreDialog,
    PlatformIcon,
    processSn,
    TagSelect
  },
  mixins: [TableAdaptive, mobileTable, tableSelections],
  data() {
    return {
      tabs: [],
      list: {
        items: [],
        total: 0,
        isInit: true
      },
      TAG_MODULES,
      tabStatus: -1,
      page: 1,
      perPage: 20,
      paramsObj: {},
      jumpSetParams: {}, // 从飞书跳转过来的勾选参数
      listLoading: false,
      sortName: '',
      sortType: '',
      tableRefName: 'tableRef', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      isUmyTable: true,
      isShowMe: false,
      isMyApproval: false,
      isMyPending: false,
      showMixedChecked: false,
      cancelToken: null,
      tagTreeList: [],
      orderPlatformOption: []
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    filterList() {
      const arr = [
        // 输入框
        { keyword: 'accountName', name: '账号名称', labelWidth: '100px', type: 'input' },
        { keyword: 'accountId', name: '账号ID', type: 'input', labelWidth: '100px' },
        { keyword: 'agentName', name: '签单签约经纪', labelWidth: '100px', type: 'input' },
        { keyword: 'currentHandler', name: '当前处理人', labelWidth: '100px', type: 'input' },
        { keyword: 'creator', name: '创建人', labelWidth: '100px', type: 'input' },
        // 下拉
        { keyword: 'platformIds', name: '平台', type: 'mulSelect', options: this.orderPlatformOption },
        { keyword: 'result', name: '初筛结果', type: 'mulSelect', options: resultOption },
        { keyword: 'cooperation', name: '合作方式', type: 'mulSelect', options: cooperationOption },
        { keyword: 'tag', name: '标签', valueName: 'name', labelName: 'name',
          childrenVal: 'item', type: 'cascaderSelect', checkStrictly: false, options: this.tagTreeList,
          multiple: true, filterable: true, collapseTags: true
        },
        // 日期
        { keyword: 'createTime', name: '创建时间', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'approvalStatus', name: '审批状态', type: 'select', options: filterApprovalOptions },
        { keyword: 'isExpedited', name: '是否加急', type: 'select', options: expeditedOptions },
        {
          keyword: 'currentNode',
          name: '当前节点',
          type: 'loadMoreSelect',
          valueName: 'name',
          directShow: true,
          multiple: true,
          extendParams: { type: CURRENT_NODE_MODULE.BLOGGER_FILTER },
          labelName: 'name',
          placeholder: '当前节点',
          searchkeyword: 'keyword',
          apiUrl: 'admin/common/currentNodes'
        }
      ];
      return arr;
    },
    rangeKeyArr() {
      return [
        { attr: 'createTime', start: 'createTimeStart', end: 'createTimeEnd', type: 'time' }
      ];
    },
    arrayKeyArr() {
      return ['result', 'cooperation', 'platformIds', 'currentNode', 'tag'];
    }
  },
  watch: {
    list: {
      handler(val) {
        this.$nextTick(() => {
          if (this.setSelectRow) this.setSelectRow(val.items);
        });
      },
      deep: true
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'signUpCreate' || from.name === 'signUpEdit' || from.name === 'signUpDetail') {
      to.meta.isChange = true;
    } else {
      to.meta.isChange = false;
    }
    next();
  },
  activated() {
    if (this.$route.meta.isChange) {
      this.fetchData();
    } else {
      const hasDefaultPresetFilter = this.$refs.FilterToolRef && this.$refs.FilterToolRef.hasDefaultPresetFilter;
      // 当预设的默认筛选且为第一次进入页面时，不请求数据（会在 filterTool 组件进行筛选）
      if (!this.list.isInit || !hasDefaultPresetFilter) {
        this.fetchData(true);
      }
    }
  },
  created() {
    const query = this.$route.query;
    query.tabStatus && (this.tabStatus = Number(query.tabStatus));
    if (query.unscore) {
      this.paramsObj.unscore = Number(query.unscore);
      this.jumpSetParams.unscore = Number(query.unscore);
    }
    this.platformList();
    this.queryTagTreeList();
  },
  mounted() {
    this.setMixedCheckedStatus();
    window.addEventListener('resize', this.setMixedCheckedStatus);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setMixedCheckedStatus);
  },
  methods: {
    hasRouteAuth,
    format,
    numFormat,
    getStatusMap,
    setMixedCheckedStatus() {
      this.$nextTick(() => {
        const mainVisibleDom = document.querySelector('.signUp');
        this.showMixedChecked = !!(mainVisibleDom && mainVisibleDom.offsetWidth < 1250);
      });
    },
    // 获取下单平台的列表
    async platformList() {
      try {
        const result = await platformList();
        result.data.forEach((i) => {
          i.label = i.value;
          i.value = i.id;
        });
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    queryTagTreeList() {
      const params = { type: this.TAG_MODULES.FILTER };
      getTagAll(params).then(res => {
        this.tagTreeList = (res && res.data) || [];
        this.tagTreeList.forEach(item => {
          if (!item.item) item.disabled = true;
        });
      }).catch(e => {
        console.log(e);
      });
    },
    showScore(row) {
      // isScore为ture且为评分中，才能评分
      return row.isScore && row.result === 1 && hasRouteAuth('crm:filter:score');
    },
    showInvite(row) {
      // 初筛结果为待提交或不合格，不为草稿中，有权限，才能邀请评分
      return [0, 3].includes(row.result) && row.status !== 0 && hasRouteAuth('crm:filter:invite');
    },
    showSignUp(row) {
      return [2, 4].includes(row.result) && this.hasRouteAuth('crm:filter:signUp');
    },
    // 发起过审批
    hasApproval(rowData) {
      return rowData.processId || typeof rowData.approvalStatus === 'number';
    },
    setEditDisable(data) {
      // let isDept = this.hasRouteAuth('crm:filter:departmentEdit');
      // if (isDept) {
      //   isDept = this.userInfo.currentDepartment.some(i => {
      //     return i.id === data.createDepartmentId;
      //   }) || data.creatorId === this.userInfo.id;
      // }
      return [0, 3].includes(data.result) && (this.hasRouteAuth('crm:filter:edit') || data.isEdit);
    },
    setDelDisable(data) {
      // 待提交，不合格且有权限且不在审批中，才能删除
      return ![0, 3, 5].includes(data.result) || !this.hasRouteAuth('crm:filter:delete');
    },
    getTabs() {
      const params = this.formatParams();
      delete params.tabStatus;
      tabList(params).then(res => {
        if (res.code !== 200) {
          ElMessage.error(res.message);
          return;
        }
        this.tabs = res.data;
      }).catch(err => {
        console.log(err);
      });
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    handleTabClick(id) {
      this.tabStatus = id;
      this.paramsObj.unscore = 0;
      this.list = { items: [] };
      this.fetchData(true);
    },
    formatParams() {
      const params = _.cloneDeep(this.paramsObj);
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      params.page = this.page;
      params.perPage = this.perPage;
      params.tabStatus = this.tabStatus;
      params.sortName = this.sortName || '';
      params.sortType = this.sortType || '';
      params.isShowMe = this.isShowMe;
      params.isMyApproval = this.isMyApproval;
      params.isMyPending = this.isMyPending;
      return params;
    },
    fetchData(reset = false) {
      if (this.cancelToken) this.cancelToken.cancel('cancel');
      const source = axios.CancelToken.source();// 用于取消请求
      this.cancelToken = source;
      this.getTabs();
      this.listLoading = true;
      if (reset) this.page = 1;
      const params = this.formatParams();
      getFilterList(params, source.token).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.list = res.data;
      }).catch(err => {
        console.log(err);
      }).finally(() => {
        this.listLoading = false;
        this.list.isInit = false;
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.isShowMe = false;
      this.isMyApproval = false;
      this.isMyPending = false;
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    toLink(val) {
      window.open(val, '_blank');
    },
    toCreate() {
      this.$router.push({ name: 'filterCreate' });
    },
    toEdit(row) {
      this.$router.push({
        name: 'filterEdit',
        params: { id: row.id }
      });
    },
    handleRescore(row) {
      const url = this.$router.resolve({
        name: 'filterEdit',
        params: { id: row.id },
        query: { rescore: 1 }
      });
      window.open(url.href, '_blank');
    },
    toDetail(row) {
      this.$router.push({
        name: 'filterDetail',
        query: { id: row.id, processId: row.processId }
      });
    },
    handleDelete(row) {
      showModal('是否确定删除?', '', {
        iconClass: 'del-icon'
      }).then(() => {
        deleteUp(row.id).then(res => {
          ElMessage.success('删除成功');
          if (this.page > 1 && this.perPage * (this.page - 1) + 1 === this.list.total) {
            this.page--;
          }
          // this.resetItemSelected(row.id);
          this.fetchData();
        }).catch(err => { console.log(err); });
      }).catch(() => {
        return false;
      });
    },
    exportUpInfo() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length === 0) {
        ElMessage.warning('请勾选需要导出的内容!');
        return;
      }
      const params = {};
      if (this.multipleSelectionAll.length) {
        params.ids = this.multipleSelectionAll.map(el => el.id).join(',');
      }
      if (this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(params, 'upExportRef');
      }
    },
    handleBatchInvite() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length === 0) {
        ElMessage.warning('请勾选需要邀请评分的内容!');
        return;
      }
      if (this.multipleSelectionAll.length) {
        const ids = this.multipleSelectionAll.map(el => el.id).join(',');
        this.$refs.inviteDialogRef.openDialog(ids);
      }
    },
    updateInvite() {
      this.clearMixinSelection();
      this.fetchData();
    },
    handleScore(row) {
      this.$refs.scoreDialogRef.openDialog(row.id);
    },
    inviteScore(row) {
      this.$refs.inviteDialogRef.openDialog(row.id);
    },
    handleSignUp(row) {
      const url = this.$router.resolve({ name: 'signUpCreate', query: { filterId: row.id }});
      window.open(url.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.signUp{
  .signUp-list{
    margin: 16px 16px 0 16px;
    background-color: #fff;
    padding: 20px 24px 55px 24px;
  }
  .operate{
    @include flexStyle($align:center);
  }
  .filter {
    @include flexStyle($align:center);
    margin-bottom: 16px;
    .create-btn{
      height: 32px;
      font-size: 14px;
      padding: 0 15px;
    }
  }
  .current-user-action-box {
    position: absolute;
    left: 509px;
    top: 6px;
    display:flex;
    align-items:center;
  }
  .more-btn{
    width: 96px;
    height: 32px;
    padding: 0;
    font-size: 14px;
    margin-right: 10px;
  }
}
.light-word{
  color: #406eff;
}
.link-name{
  display: flex;
  align-items: center;
  img{
    width: 14px;
    height: 15px;
    margin-left: 4px;
  }
}
.sign-status-tooltip {
  display: inline-block;
  max-width: 100%;
  line-height: 1;
  vertical-align: middle;
  .tooltip-content {
    max-height: 200px;
    @include scrollBar($width: 6px);
  }
}
.account-item-tip {
  line-height: 1.4;
  font-size: 14px;
  text-align: center;
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
}
.status-wrap {
  display: flex;
  align-items: center;
  .status-text {
    width: 48px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
  }
}
</style>
